<template>
    <transition name="down">
        <div class="yk-message" v-show="isShow">
            <div class="yk-m-i">
                <i class="iconfont" :class="style[type].icon"></i>
                <span class="text">{{ message }}</span>
            </div>
        </div>
    </transition>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
    name: "YkMessage",
    props: {
        message: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: 'warning' 
        }
    },
    setup() {
        const style = {
            warning: { // 修正拼写错误
                icon: 'icon-warning'
            },
            error: {
                icon: 'icon-error'
            },
            success: {
                icon: 'icon-success'
            }
        };
        const isShow = ref(false);

        onMounted(() => {
            isShow.value = true;
            setTimeout(() => {
                isShow.value = false;
            }, 3000);
        });

        return { style, isShow };
    }
};
</script>

<style lang="less" scoped>
    .down {
        &-enter {
            &-from {
                transform: translateY(-30px);
                opacity: 0;
            }

            &-active {
                transition: all .3s ease-in-out;
            }

            &-to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        &-leave {
            &-from {
                transform: translateY(0);
                opacity: 1;
            }
            &-active {
                transition: all .3s ease-in-out;
            }

            &-to {
                transform: translateY(-30px);
                opacity: 0;
            }
        }
    }

    .yk-message {
        width: 100%;
        height: 40px;
        position: fixed;
        z-index: 9999;
        top: 20px;
        line-height: 40px;
        display: flex;
        justify-content: center;
    }

    .yk-m-i {
        padding: 0 20px;
        color: @gray-0;
        background-color: #fff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
        border-radius: 5px;
    }

    i {
        margin: 0 6px 0 0;
        vertical-align: middle;
    }

    .text {
        vertical-align: middle;
    }

    .icon-sucesss {
        color: @primary-color;
    }

    .icon-error {
        color: @error-color;
    }

    .icon-warning {
        color: @warning-color;
    }
</style>